<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<style>
			body {
				background-color: aquamarine;
			}
		</style>
		<!-- 引入vue资源 -->
		<script src="js/vue.js"></script>
		<!-- 引入样式 -->		
		<link rel="stylesheet" href="css/index.css">
		<!-- 引入组件库 -->
		<script src="js/index.js"></script>
		<!-- 引入网络请求库 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
		<script src="js/axios.min.js"></script>
		<!-- 对js对象进行序列化处理的工具 -->
		<script src="js/qs.min.js"></script>
	</head>
	<body>
		<div id="app">
			<el-form style="margin-top: 240px;" :rules="rules" :model="userBean" status-icon label-width="100px"
				class="demo-ruleForm">
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item prop="username">
							<el-input prefix-icon="el-icon-user-solid" type="text" v-model="userBean.username"
								autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item prop="userpwd">
							<el-input prefix-icon="el-icon-s-goods" type="password" v-model="userBean.userpwd"
								autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12" :offset="8"></strong>
						<el-form-item>
							<el-button type="primary" @click="login()">登录</el-button>
							<el-button style="margin-left: 200px;" @click="resetForm('ruleForm')">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				userBean: {
					username: "",
					userpwd: ""
				},
				rules:{
					username: [
					            { required: true, message: '请输入活动名称', trigger: 'blur' },
					            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					          ],
					userpwd:[
						{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
							}
					]
				}

			},
			methods: {
				login: function() {
					console.log(this.userBean)
					var params=Qs.stringify(this.userBean)
					axios.post('http://localhost:8086/login', params)
					  .then(function (response) {
						  console.log(response)
						  if(response.data=="ok"){
							  window.location.href="welcome.html"
						  }
					    
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				}
			}
		})
	</script>
</html>
